<script type="text/javascript">
$(function(){
	var pg = App.soagov.svcTraceView.ui, pp = pg.params,
		hd = pg.children('.head'), bd = pg.children('.body'),
		timeline = bd.children('.timeline'),
		rulerPl = timeline.find('.ruler'), rulerEl = rulerPl[0],
		rulerCtx = rulerEl.getContext('2d'),
		diagram = bd.children('.diagram');
	
	var beginTime = pp.startTime, totalTime = pp.endTime - beginTime,
		//zoom = (timeline.width() - 240) / totalTime;
		zoom = 10;

	rulerEl.height = rulerPl.height();
	pg.seek('back').click(pg.callback);

	var frm = {
		flowId: hd.seek('flowId'),
		id: hd.seek('id'),
		startTime: hd.seek('startTime'),
		endTime: hd.seek('endTime'),
		time: hd.seek('time'),
		env: hd.seek('env'),
		addr: hd.seek('addr')
	}

	function drawRuler() {
		var w = rulerEl.width, h = rulerEl.height;
		rulerCtx.beginPath();
		rulerCtx.clearRect(0, 0, w, h);
		rulerCtx.strokeStyle = '#000000';
		rulerCtx.stroke
		rulerCtx.lineWidth = 1;
		var d = Math.round(100 / zoom);
		for (var i = 0; i < rulerEl.width; i += d) {
			rulerCtx.moveTo(i + 1, h);
			rulerCtx.lineTo(i + 1, h - (i % (d * 10)? 8:12));
		}
		rulerCtx.stroke();
		rulerCtx.closePath();
	}

	hd.seek('zoom').change(function(){
		var z = $(this).val();
		timeline.find('.work').each(function(){
			var a = $(this);
			a.find('.call').each(function(){
				var c = $(this);
				c.width(c.data('w') * z).css('margin-left', c.data('g') * z);
			});
			a.css('margin-left', a.data('g') * z + a.data('d'));
		});

		diagram.find('.work').each(function(){
			var a = $(this);
			a.find('.call').each(function(){
				var c = $(this);
				c.height(c.data('h') * z)
					.css('margin-top', c.data('g') * z);
			});
			a.css('margin-top', a.data('g') * z + a.data('d'));
		});
		zoom = z;
		drawRuler();
	}).change();
	
	frm.flowId.text(pp.flowId);
	frm.id.text(pp.id);
	frm.startTime.text(new Date(pp.startTime).format('yyyy-MM-dd HH:mm:ss.S'));
	frm.endTime.text(new Date(pp.endTime).format('yyyy-MM-dd HH:mm:ss.S'));
	frm.time.text((pp.endTime - pp.startTime) + 'ms');
	frm.env.text(pp.env);
	frm.addr.text(pp.addr);
	
	function openLogs(c){
		var url = '/log#query?target=' + 'logs' + '&trace=' + pp.id;
		if (c) {
			url +=  '&thread=' + c.threadName + '&start='
				+ c.startTime + '&end=' + c.endTime;
		}
		window.open(encodeURI(url));
	}
	hd.seek('logs').click(function(){
		openLogs();
	});
	
	function trace(t, d) {
		var n = t.threadName, tr = timeline.find('tr[name=' + n+ ']');
		if (!tr.length) {
			tr = $('<tr class="thread" name="' + n + '"></tr>')
				.append('<td class="label">' + n + '</td>')
				.append('<td class="body"></td>');
			timeline.append(tr);
		}
		var s = t.startTime, g = s - beginTime,
			workDiv = $('<div class="work"></div>')
				.data('g', g).data('d', d).css('margin-left', g * zoom + d);
		tr.children('.body').append(workDiv)
			.append('<div class="clear"></div>');
		var p = t.startTime;
		$.each(t.steps, function(i, c) {
			var s = c.startTime, w = c.endTime - s, g = s - p;
			p = c.endTime;
			$('<div class="call"></div>')
				.data('w', w).width(w * zoom)
				.data('g', g).css('margin-left', g * zoom)
				.attr('title', c.code + ' = ' + w + 'ms')
				.click(function(){
					openLogs(c);
					return false;
				}).appendTo(workDiv);
			$.each(c.traces, function(j, z){
				trace(z, d + i);
			});
		});
	}
	trace(pp, 0);

	function chart(o, pd) {
		var wd = $('<div class="work"></div>')
			.append('<div class="label">' + o.threadName + '</div>');
		$.each(o.steps, function(i, c) {
			var t = c.endTime - c.startTime,
				cd = $('<div class="call"></div>')
					.attr('title', c.code + ' = ' + t + 'ms')
					.click(function(){
						openLogs(c);
						return false;
					}).append('<div class="label">' + c.code + '&nbsp;&nbsp;&nbsp;&nbsp;'
						+ '<span class="fr">' + t + 'ms</span></div>');
			wd.append(cd);
			$.each(c.traces, function(j, z){
				chart(z, cd);
			});
			wd.append('<div class="clear"></div>');
		});
		pd.append(wd);
	}
	chart(pp, diagram);
	diagram.append('<div class="clear"></div>');
	
	function adjust(){
		var p = pg.parent(), h = p.height(), w = pg.width() - 24;
		diagram.children('.head').height(diagram.height());
		//rulerPl.width();
		rulerEl.width = rulerPl.parent().width();
		drawRuler();
	}
	$(window).resize(adjust);
	adjust(); 
});
</script>
<div class="navi">
	<span class="a" name="back">返回</span>&gt;&gt;
	<span name="title">调用链跟踪</span>
</div>
<div class="head form">
	<div class="item">
		<div class="label">服务编号：</div>
		<div class="value" name="flowId"></div>
		<div class="label">执行实例：</div>
		<div class="value" name="id"></div>
		<div class="clear"></div>
	</div>
	<div class="item">
		<div class="label">开始时间：</div>
		<div class="value" name="startTime"></div>
		<div class="label">结束时间：</div>
		<div class="value" name="endTime"></div>
		<div class="clear"></div>
	</div>
	<div class="item">
		<div class="label">所属环境：</div>
		<div class="value" name="env"></div>
		<div class="label">实例地址：</div>
		<div class="value" name="addr"></div>
		<div class="clear"></div>
	</div>
	<div class="item">
		<div class="label">服务耗时：</div>
		<div class="value" name="time"></div>
		<div class="label">缩放图表：</div>
		<div class="value">
			<input type="number" name="zoom" min="1" max="10" value="10" />
		</div>
		<span class="fr a" name="logs">查看日志</span>
		<div class="clear"></div>
	</div>
</div>
<div class="clear"></div>
<div class="body">
	<table class="timeline">
		<tr class="head">
			<th>&nbsp;</th>
			<th><canvas class="ruler"></canvas></th>
		</tr>
	</table>
	<div class="diagram">
	</div>
</div>
